<template>
	<div class="common_recommend">
		<div class="common_recommend_main">
			<ul>
				<li v-for="(item, index) in recommends" class="common_recommend_main_item">
					<a href="javascript:;" class="on" :style="{width:itemWidth+'px', height:itemWidth+'px'}">
						<img :src="item.img" :style="{width:itemWidth+'px', height:itemWidth+'px'}" />
					</a>
					<span class="common_recommend_main_item_title" v-if="index<1">您的快拍</span>
					<span class="common_recommend_main_item_title" v-else>{{item.title}}</span>
					<a href="javascript:;" class="updateinfo_button" v-if="index<1">
						<i class="icon2 updateinfo"></i>
					</a>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'common_recommend',
		props:[],
		data: function(){
			return {
				recommends:[{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				},{
					img: 'https://scontent-lax3-1.cdninstagram.com/vp/7d71dea43bf0365c46a7e0254e061625/5DC005DF/t51.2885-19/s150x150/51249694_302567050617162_4742543741972119552_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com',
					title:'my name'
				}],
				width:0,
				itemWidth:0
			}
		},
		mounted:function(){
			this.$set(this, 'itemWidth', 56);
			const width = this.recommends.length*this.itemWidth+40;
			console.log(width)
			this.$set(this, 'width', width);
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.common_recommend{
		background-color: #fafafa;
		padding:20/@base 0;
		border-bottom: 1px solid #e6e6e6;
		overflow:auto;
		overflow-y:hidden;
		.common_recommend_main{
			ul{
				display:flex;
				padding:0;
				margin:0;
				li{
					list-style: none;
					position:relative;
					&:first-child{
						padding:0 10/@base 0 30/@base;
						&.common_recommend_main_item{
							a{
								margin:0 10/@base;
								&.on{
									border:5/@base solid #efefef;
								}
								&.updateinfo_button{
								    position:absolute;
								    bottom:25/@base;
								    right:15/@base;
								    width:18px;
								    height:18px;
								    margin:0;
								    padding:0;
								    border:0;
								}
							}
							span{
								display:block;
								text-align: center;
								&.common_recommend_main_item_title{
									font-size: 16/@base;
									color:#333;
								}
							}
						}
					}
					&:last-child{
						padding:0 20/@base 0 0;
					}
					&.common_recommend_main_item{
						a{
							display:block;
							background-color: #fff;
							border-radius: 56/@base;
							overflow: hidden;
							margin:0 10/@base;
							border:5/@base solid #fff;
							&.on{
								border:5/@base solid #ff6699;
							}
							img{
								width:100%;
								height:100%;
							}
						}
						span{
							display:block;
							text-align: center;
							&.common_recommend_main_item_title{
								font-size: 16/@base;
								color:#999;
							}
						}
					}
				}
			}
		}
	}
	.icon2{
		&.updateinfo{
			background-size: 410px 396px;
		    background-position: -250px -254px;
		    width:18px;
		    height:18px;
		}
	}
</style>